<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增婚纱照')"/>
    <th:block th:include="include :: cropper-css"/>
    <style type='text/css'>
        /* avator css start */
        .container {
            margin: 10px 5px 5px 5px;
        }

        .action {
            padding: 5px 0px;
        }

        .cropped {
            width: 200px;
            border: 1px #ddd solid;
            box-shadow: 0px 0px 12px #ddd;
        }

        .img-preview {
            border-radius: 50%;
            box-shadow: 0px 0px 12px #7e7e7e;
            display: inline-block;
        }

        .preview-box {
            text-align: center;
            margin: 0px auto;
            margin-top: 10px;
            color: #bbb;
        }

        .preview-md {
            width: 128px;
            height: 128px;
        }

        .preview-sm {
            width: 96px;
            height: 96px;
        }

        .preview-xs {
            width: 64px;
            height: 64px;
        }

        .imageBox {
            border: 1px solid #aaa;
            overflow: hidden;
            cursor: move;
            box-shadow: 4px 4px 12px #B0B0B0;
            margin: 0px auto;
        }

        .btn-custom {
            float: right;
            width: 46px;
            display: inline-block;
            margin-bottom: 10px;
            height: 37px;
            line-height: 37px;
            font-size: 14px;
            color: #FFFFFF;
            margin: 0px 2px;
            background-color: #f38e81;
            border-radius: 3px;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0px 0px 5px #B0B0B0;
            border: 0px #fff solid;
        }

        /*选择文件上传*/
        .new-contentarea {
            width: 165px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
            float: left;
        }

        .new-contentarea label {
            width: 100%;
            height: 100%;
            display: block;
        }

        .new-contentarea input[type=file] {
            width: 188px;
            height: 60px;
            background: #333;
            margin: 0 auto;
            position: absolute;
            right: 50%;
            margin-right: -94px;
            top: 0;
            right /*\**/: 0px \9;
            margin-right /*\**/: 0px \9;
            width /*\**/: 10px \9;
            opacity: 0;
            filter: alpha(opacity=0);
            z-index: 2;
        }

        a.upload-img {
            width: 165px;
            display: inline-block;
            margin-bottom: 10px;
            height: 37px;
            line-height: 37px;
            font-size: 14px;
            color: #FFFFFF;
            background-color: #f38e81;
            border-radius: 3px;
            text-decoration: none;
            cursor: pointer;
            border: 0px #fff solid;
            box-shadow: 0px 0px 5px #B0B0B0;
        }

        a.upload-img:hover {
            background-color: #ec7e70;
        }

        .tc {
            text-align: center;
        }

        /* avator css end */
    </style>
</head>
<body class="white-bg" style="width: 1000px">
<div class="row container">
    <div class="col-md-10" style="left: 350px">
        <div class="imageBox">
            <img id="avatar" th:src=" @{/img/profile.jpg}" th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''">
        </div>
        <div class="action">
            <div class="new-contentarea tc">
                <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
                <input type="file" name="avatar" id="inputImage" accept="image/*"/>
            </div>
            <button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i
                    class="fa fa-search-plus"></i></button>
            <button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i
                    class="fa fa-search-minus"></i></button>
            <button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i
                    class="fa fa-rotate-left"></i></button>
            <button type="button" class="btn-custom" data-method="rotate" data-option="45"><i
                    class="fa fa-rotate-right"></i></button>
            <button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i
                    class="fa fa-arrows-h"></i></button>
            <button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i
                    class="fa fa-arrows-v"></i></button>
            <button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i></button>
        </div>
    </div>
    <!--<div class="col-md-2">
        <div class="cropped">
            <div class="preview-box">
                <div class="img-preview preview-xs"></div>
            </div>
            <div class="preview-box">
                <div class="img-preview preview-sm"></div>
            </div>
            <div class="preview-box">
                <div class="img-preview preview-md"></div>
            </div>
        </div>
    </div>-->
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: cropper-js"/>
<script type="text/javascript">

    var type = [[${type}]];
    var aspectRatio = 1;
    var autoCropArea = 1;
    if (type == "001") {
        aspectRatio = 0.45;
        autoCropArea = 1;
        type = "001";
    }else if(type == "002"){
        aspectRatio = 1;
        autoCropArea = 0.5;
        type = "002";
    }else if(type == "003"){
        aspectRatio = 0.45;
        autoCropArea = 1;
        type = "003";
    }else if(type == "004"){
        aspectRatio = 1.5;
        autoCropArea = 0.8;
        type = "004";
    }

    var cropper;
    var croppable = false;
    $(window).load(function () {
        var image = document.getElementById('avatar');
        cropper = new Cropper(image, {
            aspectRatio: aspectRatio,
            viewMode: 1,
            autoCropArea: autoCropArea,
            preview: '.img-preview',
            ready: function () {
                croppable = true;
            }
        })

        $('#inputImage').on('change', function () {
            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            if (/^image\/\w+$/.test(file.type)) {
                reader.onload = function (e) {
                    if (croppable) {
                        cropper.replace(e.target.result)
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                $.modal.alertWarning('请选择一个图片文件。');
            }
        });

        $('.btn-custom').on('click', function (e) {
            if (!croppable) {
                $.modal.alertWarning("裁剪框加载中,请稍后...");
                return;
            }
            var data = {
                method: $(this).data('method'),
                option: $(this).data('option') || undefined,
            };
            var result = cropper[data.method](data.option, data.secondOption);
            if (['scaleX', 'scaleY'].indexOf(data.method) !== -1) {
                $(this).data('option', -data.option)
            }
        })
    });

    function submitHandler() {
        if (!croppable) {
            $.modal.alertWarning("裁剪框加载中,请稍后...");
            return
        }
        cropper.getCroppedCanvas().toBlob(function (img) {
            var formdata = new FormData();
            formdata.append("imageFile", img);
            formdata.append("type", type);
            $.ajax({
                url: ctx + "marry/userImage/addImage",
                data: formdata,
                type: "post",
                processData: false,
                contentType: false,
                success: function (result) {
                    $.operate.saveSuccess(result);
                }
            })
        });
    }

    $(window).resize(function () {
        $('.imageBox').height($(window).height() - 80);
        $('.cropped').height($(window).height() - 40);
    }).resize();

    if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: function (callback, type, quality) {
                var canvas = this;
                setTimeout(function () {
                    var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                    var len = binStr.length;
                    var arr = new Uint8Array(len);
                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }
                    callback(new Blob([arr], {
                        type: type || 'image/png'
                    }));
                });
            }
        });
    }
</script>
</body>
</html>
